<template>
	<div class="app-container">
			<el-card class="box-card">
	        <div slot="header" class="clearfix">
	        	<span>计费组列表</span>
	        </div>
	        	<el-table v-loading="loading" :data="postList">
			      <el-table-column label="序号" prop="postCode" type="index" />
			      <el-table-column label="计费组名称" prop="groupName" :show-overflow-tooltip="true"  >
			      	<template slot-scope="scope">
			      		 <el-link type="primary" class="buttonText" @click='cardDetiles(scope.row.groupId)'>{{scope.row.groupName}}</el-link>
			      	</template>
			      </el-table-column>
			      <el-table-column label="计费组代码" prop="groupCode" />
			      <el-table-column label="批次号" prop="bathNo" />
			      <el-table-column label="计费模式" prop="castMode"  >
			      	<template slot-scope="scope">
			      		 <el-tag type="info" v-if="scope.row.castMode==1">单卡计费</el-tag>
          				<el-tag type="success" v-if="scope.row.castMode==2">共享计费</el-tag>
			      	</template>
			      </el-table-column>
       
			      <el-table-column label="总卡数(张)" prop="cardTotal" align="center" >
			      	<template slot-scope="scope">
		      		 <el-link type="primary" class="buttonText" @click='gotoList(scope.row.groupId)'>{{scope.row.cardTotal}}</el-link>
		      		</template>
		      	  </el-table-column>
			      <el-table-column label="激活卡数(张)" prop="activateCatdTotal" align="center"  />
			      <el-table-column label="当月总流量(MB)" prop="flowTotal" align="center"  :formatter="flowFormat" />
			      <el-table-column label="当月已用流量(MB)" prop="flowUse" align="center" :formatter='flowFormatMonth'/>
			      <el-table-column label="预警设置" prop="postName" align="center"  >
			      	<template slot-scope="scope">
			      		 <el-link type="primary" class="buttonText" @click='warning(scope.row.groupId)'>预警设置</el-link>
			      	</template>
			      </el-table-column>
			       <el-table-column label="自定义备注" prop="remark" align="center"  >
			      	<template slot-scope="scope">
			      		 <i class="el-icon-edit" @click="addMask(scope.row.groupId)"></i>
			      		 <el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="top-start" :show-overflow-tooltip="true">
			      		 <el-tag>{{scope.row.remark}}</el-tag>
			      		 </el-tooltip>
			      	</template>
			      </el-table-column>
			    </el-table>
	        </el-card>
	      	<!-- 备注-->
	        <el-dialog title="修改备注" :visible.sync="openMask" width="500px" :close-on-click-modal='false'>
    			<el-input type='textarea' v-model='mask.remark'></el-input>
    			<div slot="footer" class="dialog-footer">
			    <el-button @click="openMask = false">取 消</el-button>
			    <el-button type="primary" @click="sureMask">确 定</el-button>
			  </div>
    		</el-dialog>
    		<!-- 预警-->
	        <el-dialog title="预警设置" :visible.sync="openWarn" width="700px" :close-on-click-modal='false'>
    			<el-form ref="form" :model="warnData" label-width="140px">
    				<el-form-item label="单卡流量预警(%)">
			          <el-input v-model="warnData.cardWarningThreshold" placeholder="" />
			          <el-row>已使用流量请填写大于0的整数。梯度流量预警用分号分开。例:80;90;100</el-row>
			        </el-form-item>
			       <el-form-item label="计费组流量预警(%)">
			          <el-input v-model="warnData.groupWarningThreshold" placeholder="" />
			          <el-row>请填写大于0的整数。梯度流量预警用分号分开。例:80;90;100</el-row>
			        </el-form-item>
			        <el-form-item label="计费结束时间预警:">
			          <el-checkbox-group v-model="warnData.dateWarningThreshold">
					    <el-checkbox key='3' label="3" >剩余3个月到期</el-checkbox>
					    <el-checkbox key='2' label="2" >剩余2个月到期</el-checkbox>
					    <el-checkbox key='1' label="1" >剩余1个月到期</el-checkbox>
					  </el-checkbox-group>
					  <el-row>多选。例：第一次剩余3个月到期预警，第二次剩余2个月预警</el-row>
			        </el-form-item>
			        <el-form-item label="计费模式">
			          <el-select v-model="warnData.castMode" placeholder="请选择">
					    <el-option key="1" label="单卡计费" value="1"></el-option>
					    <el-option key="2" label="共享计费" value="2"></el-option>
					    </el-option>
					  </el-select>
			        </el-form-item>
			        <el-form-item label="预警发送邮箱:">
			          <el-input v-model="warnData.email" type='textarea' />
			          <el-row>分号分隔, 最多五个邮箱, 例如: example1@qq.com;example2@qq.com</el-row>
			        </el-form-item>
			        <el-form-item label="启用">
			         <el-checkbox v-model="warnData.warningStatus">启用</el-checkbox>
			        </el-form-item>
			        <el-row><el-col :span='4' :offset='5'><el-button type="primary" @click='saveWarn'>保存</el-button></el-col></el-row>
			        <el-row><el-col style='text-align: center;color: red;'>注：以上分号都为英文字符。</el-col></el-row>
    			</el-form>
    		</el-dialog>
    		
    		
	</div>
</template>

<script>
	
//	导出：whty:countMoneygroup:export
//单条数据查询   whty:countMoneygroup:query
//新增  whty:countMoneygroup:add
//编辑  whty:countMoneygroup:edit
//删除  whty:countMoneygroup:remove

	import { accountingGroup,accountingGroupUpdata,accountingGroupSelect} from "@/api/system/info";
	export default{
		data(){
			return{
				postList:[],
				// 遮罩层
      			loading: false,
      			//打开备注
      			openMask:false,
      			//预警
      			openWarn:false,
      			//备注
      			mask:{
      				remark:'',
      				groupId:'',
      			},
      			
      			// 查询参数
		      	queryParams: {
		        pageNum: 1,
		        pageSize: 10,
		     	},
		     	 warnData:{
		     	   groupId:'',
		     	   cardWarningThreshold:'',
		     	   groupWarningThreshold:'',
		      	   dateWarningThreshold:[],
		      	   email:'',
		      	   castMode:'',
		      	   warningStatus:''
		     	 },
			}
		},
		
		created(){
			this.getList();
		},
		methods:{
			/** 获取列表 */
		    getList() {
		      this.loading = false;
		      accountingGroup(this.queryParams).then(response => {
		      	console.log(response);
		        this.postList = response.rows;
		        this.total = response.total;
		        this.loading = false;
		      });
		    },
		    cardDetiles(id){
		    	this.$router.push({path:`/config1/billingDetiles/${id}`});
		    },
		    gotoList(id){
		    	console.log(id)
		    	this.$router.push({path:`/config2/billingList/${id}`});
		    },
		    /** 添加备注 */
		    addMask(id){
		    	this.openMask = true;
		    	this.mask.groupId = id;
		    	accountingGroupSelect(id).then((res)=>{
		    		console.log(res);
		    		this.mask.remark = res.data.remark;
		    	})
		    },
		    sureMask(){
		    	accountingGroupUpdata(this.mask).then((res)=>{
		    		console.log(res);
		    		if(res.code=='200'){
		    			this.openMask = false;
		    			 this.$message({
				          message: '操作成功',
				          type: 'success'
				        });
				        this.getList();
		    		}else{
		    			this.$message.error('操作失败');
		    		}
		    	})
		    },
		    warning(groupId){
		    	this.openWarn = true;
		    	this.warnData.groupId = groupId;
		    	accountingGroupSelect(groupId).then((res)=>{
		    		console.log(res);
		    		this.warnData.cardWarningThreshold = res.data.cardWarningThreshold;
		    		this.warnData.groupWarningThreshold = res.data.groupWarningThreshold;
		    		this.warnData.castMode =JSON.stringify(res.data.castMode);
		    		this.warnData.dateWarningThreshold = res.data.dateWarningThreshold.split(';');
		    		this.warnData.email = res.data.email;
		    		if(res.data.warningStatus=='0'){
		    			this.warnData.warningStatus = false
		    		}else{
		    			this.warnData.warningStatus = true;
		    		}
		    	})
		    },
// 		     保存预警
			saveWarn(){
				  this.$refs["form"].validate(valid => {
			        if (valid) {
			        	if(this.warnData.warningStatus){
			        		this.warnData.warningStatus = 1
			        	}else{
			        		this.warnData.warningStatus = 0
			        	}
			        	this.warnData.dateWarningThreshold = this.warnData.dateWarningThreshold.join(';');
			            var pattern=/^[\d;]+$/;
			            if(!pattern.test(this.warnData.cardWarningThreshold)||!pattern.test(this.warnData.groupWarningThreshold)){
			            	this.$message.error('流量预警输入格式有误！');
			            	return;
			            }
			        	console.log(this.warnData);
			        		accountingGroupUpdata(this.warnData).then((res)=>{
			        			console.log(res);
			        			if(res.code=='200'){
			        				 this.$message({
							          message: '操作成功',
							          type: 'success'
							        });
							        this.openWarn = false;
			        			}else{
			        				this.$message.error('操作失败');
			        			}
			        		})
			        }
			      });
			},
			yujing(data){
				this.openWarnGroup = true;
			},
			flowFormat(a){
				var a = (a.flowTotal/1024).toFixed(2);
				return a;
			},
			flowFormatMonth(a){
				var a = (a.flowUse/1024).toFixed(2);
				return a;
			}
		}
	}
</script>

<style scoped="scoped">
	.el-icon-edit{
		color: #1890ff;
	}
	
</style>

<style>
	 .el-tooltip__popper{
    max-width: 320px;
    line-height: 180%;
	}
</style>